<template>
    <div class="myfansi">
        <div class="header padding-24 space-between bg-active" >
            <div class="h-back" @click="goBack"><img :src="back" alt=""></div>
            <div class="title fs-36 color-f">{{title}}</div>
            <!-- <div class="h-share"></div> -->
            <div class="h-right"></div>
        </div>
        <div class="list">
            <div class="list-item bg-f padding-24 space-between" v-for="(item,index) in attentionlist" :key="index">
                <div class="left" @click="gotouserinfo(item.user_id)">
                    <img :src="item.user_avator" alt="" class="cove">
                    <div class="loge" v-if="item.is_singer==1||item.is_vip==1">
                        <img :src="musicer" alt="" v-if="item.is_singer==1">
                        <img :src="vip" alt="" v-if="item.is_vip==1&&item.is_singer!=1">
                    </div>
                </div>
                <div class="right  space-between">
                    <div class="flex-column">
                        <p class="fs-32">{{item.nickname}}</p>
                        <div class="center-col fs-24 color-6">
                            <!-- <p>通讯录名字</p> -->
                            <!-- <p v-if="item.fansnum&&item.ismusicer==true">|</p>
                            <p v-if="item.ismusicer==true">音乐人</p> -->
                        </div>
                        
                    </div>
                    <div class="gzhu center bg-r color-f" v-if="item.is_attention!=1" @click="tocollect(item)">+关注</div>
                    <div class="uncollect fs-26 color-6 center" v-else @click="tocollect(item)">取消关注</div>
                </div>
            </div>
        </div>
        <div class="noFan" v-show="attentionlist.length === 0">您还没有粉丝额，继续加油~~~</div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            back:require('../../assets/index/back.png'),
            title:'粉丝',
            musicer:require('../../assets/account/musicer.png'),
            vip:require('../../assets/account/vip.png'),
            attentionlist:[],
        }
    },
    created(){
        this.getmyfanselist()
    },
    methods:{
        getmyfanselist(){
            var url = this.$host1 + `home/lookMyFan`;
                this.$axios.get(url).then(res => {
                if (res.status == 200) {
                let resData = res.data;
                if (resData.code == 200) {
                    this.attentionlist=resData.data
                }else{
                    this.AlertWin(resData.message);
                }
                }
            }).catch(() => {
                this.AlertWin("网络错误！请稍后重试！");
            });
        },
        tocollect(i){
            let url = this.$host1 + `home/friend/eachAttention`
            var data={
                user_love_id:i.user_id
            }
            this.$axios.post(url,data).then(res => {
                if (res.status == 200) {
                let resData = res.data;
                if (resData.code == 200) {
                    if(i.is_attention==1){
                        this.AlertWin("取消关注成功！");
                    }else{
                        this.AlertWin("关注成功！");
                    }
                    
                    this.getmyfanselist()
                    //this.getmyfocuslist()
                }else{
                    this.AlertWin(resData.message);
                }
                }
            }).catch(() => {
                this.AlertWin("网络错误！请稍后重试！");
            });
        },
        goBack(){
            this.$router.go(-1);
        },
        gotouserinfo(i){
            this.$router.push({
                path: '/singerhome',
                query: {
                    user_id: i,
                }
            })
        },
    }
}
</script>
<style lang="scss" scoped>
.myfansi{
    .header{
        width: 100%;
        height: 1rem;
        .h-back{
            width: 0.15rem;
            height: 0.26rem;
            img{
                //transform: rotate(180deg);
                width: 100%;
            }
        }
        .title{
            font-size: 0.36rem;
            font-weight: bold;
        }
        .h-right{
            width: 0.38rem;
            height: 0.5rem;
            img{
                display: inline-block;
                width: 100%;
            }
        }
        .h-share{
            position: absolute;
            right: 1rem;
            width: 0.45rem;
            height: 0.43rem;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
    .list{
        margin-top:1rem;
        .list-item{
            height: 1.4rem;
            border-bottom: 0.01rem solid #e9e9e9;
            .left{
                width: 0.85rem;
                height: 0.85rem;
                position: relative;
                .cove{
                    width: 0.85rem;
                    height: 0.85rem;
                    border-radius: 50%;
                    object-fit: cover;
                }
                .point{
                    width: 0.16rem;
                    height: 0.16rem;
                    position: absolute;
                    border-radius: 50%;
                    right: 0;
                    top: 0;
                }
                .loge{
                    width: 0.32rem;
                    height: 0.32rem;
                    position: absolute;
                    border-radius: 50%;
                    bottom: 0;
                    right: 0;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .right{
                width: calc(100% - 1.1rem);
                height: 0.9rem;
                .gzhu{
                    width: 1.18rem;
                    height: 0.5rem;
                    border-radius: 0.25rem;
                    //border: 0.01rem solid #540479;
                    //color: #540479;
                }
                .uncollect{
                    width: 1.38rem;
                    height: 0.5rem;
                    border-radius: 0.25rem;
                    border: 0.01rem solid #e9e9e9;
                }
                .center-col{
                    p{
                        margin-right: 0.1rem;
                    }
                }
            }
        }
    }
    .noFan{
        width:100%;
        padding:30px 0;
        margin-top:1rem;
        text-align: center;
        color:gray;
        font-size:15px;
    }
}
</style>
